<template>
	<view>
		<!-- {{width}} -->
		<!-- <image src="http://img95.699pic.com/for_360_sitemap_imgs/003/00/53/64/57.jpg"></image> -->
		<!-- <canvas @click="click" 
		:style="{width:width+'px', height:height+'px'}" 
		canvas-id="firstCanvas" 
		id="firstCanvas"
		@touchmove="moveCanvas"
		@touchstart="canvasStart"
		@touchend="canvasEnd"
		></canvas> -->
		<view class="nav_bar">

		</view>
		<view style="width:100%;height: 100vh;">
			<view class="imgOut">
				<image style="width: 100%;height: 1500rpx;" mode="aspectFill" :src="imageUrl"></image>
				<view class="tag" v-for="i in list" :key="i.id" v-if="i.is_disable!=1" @tap="clicks(i.id)"
					:style="{'top': i.y.split('-')[0] + 'px', 'left': i.x.split('-')[0] + 'px'}">
					{{i.name}}
					<view class="" style="font-size: 20rpx;">
						<!-- <image style="width:20rpx;height: 25rpx;" src="../../static/xinsuo.png" mode="aspectFill"></image> -->
					总人数{{i.lock}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mountainList,
		getDixingtu
	} from './request.js'
	export default {
		data() {
			return {
				width: 0,
				height: 0,
				list: [],
				imageUrl: "", //地形图片
			}
		},
		// onReady() {
		// 	const ctx = uni.createCanvasContext('firstCanvas',this)
		// 	// let canvas = document.querySelector('#canvas');
		// 	// const ctx = canvas.getContext('2d');
		// 	// let w_h=new Promise((r,n)=>{
		// 	// 	uni.getImageInfo({
		// 	// 	        src: "https://p0.ssl.qhimgs1.com/sdr/400__/t0154338114a1484a4e.jpg",
		// 	// 	        success: (res) => {
		// 	// 	          // resolve(res);
		// 	// 			  console.log(res)
		// 	// 	        },
		// 	// 	        fail: (err) => {
		// 	// 	          // reject(err);
		// 	// 	        }
		// 	// 	});
		// 	// })

		// 	uni.getImageInfo({
		// 		src:'http://img95.699pic.com/for_360_sitemap_imgs/003/00/53/64/57.jpg',
		// 		success:(e)=>{
		// 			console.log(e.width,e.height,'22222222222222')
		// 			console.log(e,'计算宽高比例')
		// 			this.width=e.width
		// 			this.height=e.height
		// 			// 计算宽高比例
		// 			// that.ratio=data[0]/e.width
		// 			// console.log(that.ratio)
		// 			ctx.drawImage(e.path,0,0,e.width,e.height)

		// 			ctx.draw(true)		
		// 		},
		// 		fail(err){
		// 			console.log(err)
		// 		}
		// 	})
		// },
		mounted() {},
		onLoad() {
			this.getMaps() //地形图
		},
		onShow() {
			this.getList()
		},
		methods: {
			// 获取地形图
			getMaps() {
				getDixingtu().then(res => {
					console.log(res, '66666')
					if (res.data.code == 1) {
						this.imageUrl = res.data.data.image
						// console.log(this.imageUrl,'77777')
					}
				})
			},
			clicks(id) {
				uni.navigateTo({
					url: './wishDetail?id=' + id + '&imgUrl=' + this.imageUrl
				})
			},
			getList() {
				mountainList().then(res => {
					console.log(res)
					if (res.data.code === 1) {
						this.list = res.data.data
						console.log(this.list)
					}
				})
			},
			//  移动canvas
			moveCanvas() {

			},
			// 开始触摸
			canvasStart() {

			},
			// 结束
			canvasEnd() {

			}
		}
	}
</script>

<style>
	.nav_bar {
		width: 750rpx;
		height: var(--status-bar-height);
		position: sticky;
		left: 0;
		top: 0;
		z-index: 666;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding-bottom: 80rpx;
	}

	.imgOut {
		width: 750rpx;
		height: 100vh;
		position: relative;
	}

	.tag {
		position: absolute;
		width: 150rpx;
		height: 85rpx;
		z-index: 99;
		color: #FA9700;
		font-size: 30rpx;
		/* line-height: 72rpx; */
		background: url(../../static/images/wish/whiteBg.png) no-repeat;
		background-size: 150rpx 85rpx;
		text-align: center;
		font-weight: 800;
	}
</style>
